<template>
	<view class="money-box">
		<u-navbar back-icon-name="arrow-left" :title-bold="true" title-size="36" :border-bottom="false" back-icon-color="#333333" title="充值"></u-navbar>

		<view class="money-center">
			<view class="balance-box r20">
				<view class=" mb20">
					<image src="../../static/img/money.png" class="w32 h26 mr11" mode=""></image>
					<text class="f26">余额</text>
				</view>
				<view class="">
					<text class="f44" style="font-weight: 800;">{{userInfo.starNum}}</text>
					<text class="f24 ml5">星</text>
				</view>
			</view>

			<view class="mt30 f24 flex align-center bgc-box" style="padding: 17rpx 25rpx; color: #FF9A3B;">
				<i class="cuIcon-notice mr19 f36"></i>
				<text>充值比例为1:1，充值后不可提现，金额仅限此App使用</text>
			</view>

			<view class="flex justify-between align-center mt39 mb30">
				<view class="">
				</view>

				<view class="f24" style="color: #999999;">
					<text>1元人民币=1星币</text>
				</view>
			</view>

			<!--  -->
			<view class="fl flex align-center justify-around flex-wrap mr20 mb20 bgc-mar f32"
				v-for="(item, index) in list" :key="index">
				<view class="w217 h130 text-center" :class=" bgc == index ? 'bgc' : ''" @click="addMonet(index,item.num)">
					<text>{{item.num}}星星</text>
				</view>
			</view>

			<view class="f32 ww100">
				<text style="font-weight: 600; ">选择支付方式</text>
				<view v-for="(item,index) in listFrom" :key="index">
					<view class="h120 ww100 flex align-center">
						<image :src="item.img" class="w50 h50" mode=""></image>
						<view class="flex ml30  ww100 justify-between u-border-bottom h120 align-center">
							<view>{{item.name}}</view>
							<u-radio-group active-color="#40C6A8" v-model="value" @change="radioGroupChange">
								<u-radio :name="item.unt">
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
			</view>




				<view class="flex justify-center">
					<button type="default" class="add-pay cu-btn mt305" @click="submitPlay">支付￥{{vipMoney ? vipMoney : 10}} .00</button>
				</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					num: 1,
				}, {
					num: 0.01,
				}, {
					num: 30,
				}, {
					num: 40,
				}, {
					num: 50,
				}, {
					num: 60,
				}],
				bgc: 0,
				moneyInit: '',
				listFrom: [{
					name: '微信',
					unt: 1,
					img: '../../static/img/weix.png'
				}, {
					name: '支付宝',
					unt: 0,
					img: '../../static/img/zhifub.png'
				}],
				value: '',
				radioyText: '',
				url: '',
				vipMoney: '',
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			async getUserInfo() {
				const res = await this.$u.get('api/user/queryUser')
				this.userInfo = res.data
			},
			addMonet(index,num) {
				this.bgc = index
				this.vipMoney = num
			},
			 radioGroupChange(index) {
				this.radioyText = index
			},
			
			async submitPlay() {
				const res = await this.$u.post('api/user/recharge/aliPay',{
					id: uni.getStorageSync('userInfo').id,
					payWay: this.radioyText ? this.radioyText : 0,
					payMoney: this.vipMoney ? this.vipMoney : 1,
				})
				console.log(res.data)
				uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: res.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.money-box {

		.money-center {
			width: 100%;
			margin-bottom: 305rpx;
			padding: 30rpx;

			.balance-box {
				padding: 33rpx 44rpx;
				color: #FFFFFF;
				background-color: #40C6A8;
			}
		}

		.bgc-box {
			border-radius: 10rpx;
			background-color: #FFF6E5;
		}

		.bgc-mar {
			// margin-right: 20rpx;
			// margin-bottom: 20rpx;
			border-radius: 10rpx;
			line-height: 130rpx;
			background-color: #F7F7F7;
		}

		.bgc-mar:nth-child(3n + 0) {
			margin-right: 0;
		}

		.bgc {
			color: #FFFFFF;
			border-radius: 10rpx;
			background-color: #40C6A8;
		}
		
		.add-pay {
			width: 520rpx;
			height: 80rpx;
			border-radius: 40rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			background-color: #000000;
			margin: 305rpx auto 80rpx;
		}
	}
</style>
